<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>商城后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/layui_ext/dtree/dtree.css}" >
    <link rel="stylesheet" th:href="@{/lib/layui_ext/dtree/font/dtreefont.css}" >
    <style>
        body {
            background-color: #ffffff;
        }
        .layui-table img{
            max-width: 260px;
        }
    </style>
</head>
<body>

<span th:replace="common_page::common"></span>


<div class="layui-form layuimini-form">

    <input type="hidden" name="columnTypeCode" th:value="${columnTypeCode}">

    <div class="layui-form-item">
        <label class="layui-form-label required">栏目标题</label>
        <div class="layui-input-block">
            <input type="title" name="title" lay-verify="required" maxlength="100" lay-reqtext="不能为空" placeholder="请输入栏目标题" value="" class="layui-input">
            <tip>填写栏目标题。</tip>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label ">顶部推荐标签</label>
        <div class="layui-input-block">

            <script type="text/html" id="columnTopLabelTableToolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加一行 </button>
                </div>
            </script>

            <table class="layui-hide" id="columnTopLabelTable"  lay-filter="columnTopLabelTableFilter" ></table>

            <script type="text/html" id="columnTopLabelTableBar">
                <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a> &nbsp;&nbsp;
            </script>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">左侧推荐标签</label>
        <div class="layui-input-block">
            <script type="text/html" id="columnLeftLabelTableToolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加一行 </button>
                </div>
            </script>

            <table class="layui-hide" id="columnLeftLabelTable" lay-filter="columnLeftLabelTableFilter"  ></table>

            <script type="text/html" id="columnLeftLabelTableBar">
                <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a> &nbsp;&nbsp;
            </script>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">开始展示时间</label>
        <div class="layui-input-block">
            <input type="text" id="startShowDate" name="startShowDate" class="layui-input" lay-verify="required" readonly >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">结束展示时间</label>
        <div class="layui-input-block">
            <input type="text" id="endShowDate" name="endShowDate" class="layui-input" lay-verify="required" readonly >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">关联城市</label>
        <div class="layui-input-block">
            <input type="text" readonly  id="selectArea" lay-verify="required"  placeholder="请选择关联城市" value="" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item" id="connectProduct" >
        <label class="layui-form-label required " >商品推荐</label>
        <div class="layui-input-block">

            <table class="layui-table">
                <colgroup>
                    <col >
                    <col >
                    <col >
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>图片预览</th>
                    <th>图片上传(推荐185px*155px)</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>点击跳转</th>
                </tr>
                </thead>
                <tbody id="recommendProducts">
                <tr >
                    <td><img id='recommend_product_preview_0' src='/images/img_260_220.png'  style="width:185px;height:155px;" ></td>
                    <td>
                        <input type='file'  attr-index="0" id='recommend_product_img_0' />
                        <input type='hidden' id='recommend_product_img_hidden_0'  />
                    </td>
                    <td><input type='text' id="recommend_product_name_0"  maxlength='255' class='layui-input' /></td>
                    <td><input type='text' id="recommend_product_price_0"  maxlength='50' class='layui-input' /></td>
                    <td><input type='text'  id="recommend_product_clickPath_0"  maxlength='500' class='layui-input'  /></td>
                </tr>

                <tr >
                    <td><img id='recommend_product_preview_1' src='/images/img_260_220.png'  style="width:185px;height:155px;" ></td>
                    <td>
                        <input type='file'   attr-index="1" id='recommend_product_img_1' />
                        <input type='hidden' id='recommend_product_img_hidden_1'  />
                    </td>
                    <td><input type='text' id="recommend_product_name_1"  maxlength='255' class='layui-input' /></td>
                    <td><input type='text' id="recommend_product_price_1"  maxlength='50' class='layui-input' /></td>
                    <td><input type='text'  id="recommend_product_clickPath_1"  maxlength='500' class='layui-input'  /></td>
                </tr>

                <tr >
                    <td><img id='recommend_product_preview_2' src='/images/img_260_220.png'  style="width:185px;height:155px;" ></td>
                    <td>
                        <input type='file' attr-index="2" id='recommend_product_img_2' />
                        <input type='hidden' id='recommend_product_img_hidden_2'  />
                    </td>
                    <td><input type='text' id="recommend_product_name_2"  maxlength='255' class='layui-input' /></td>
                    <td><input type='text' id="recommend_product_price_2"  maxlength='50' class='layui-input' /></td>
                    <td><input type='text'  id="recommend_product_clickPath_2"  maxlength='500' class='layui-input'  /></td>
                </tr>

                <tr >
                    <td><img id='recommend_product_preview_3' src='/images/img_260_220.png'  style="width:185px;height:155px;" ></td>
                    <td>
                        <input type='file'  attr-index="3" id='recommend_product_img_3' />
                        <input type='hidden' id='recommend_product_img_hidden_3'  />
                    </td>
                    <td><input type='text' id="recommend_product_name_3"  maxlength='255' class='layui-input' /></td>
                    <td><input type='text' id="recommend_product_price_3"  maxlength='50' class='layui-input' /></td>
                    <td><input type='text'  id="recommend_product_clickPath_3"  maxlength='500' class='layui-input'  /></td>
                </tr>

                <tr >
                    <td><img id='recommend_product_preview_4' src='/images/img_260_220.png'  style="width:185px;height:155px;" ></td>
                    <td>
                        <input type='file'  attr-index="4" id='recommend_product_img_4' />
                        <input type='hidden' id='recommend_product_img_hidden_4'  />
                    </td>
                    <td><input type='text' id="recommend_product_name_4"  maxlength='255' class='layui-input' /></td>
                    <td><input type='text' id="recommend_product_price_4"  maxlength='50' class='layui-input' /></td>
                    <td><input type='text'  id="recommend_product_clickPath_4"  maxlength='500' class='layui-input'  /></td>
                </tr>

                <tr >
                    <td><img id='recommend_product_preview_5' src='/images/img_260_220.png'  style="width:185px;height:155px;" ></td>
                    <td>
                        <input type='file'  attr-index="5" id='recommend_product_img_5' />
                        <input type='hidden' id='recommend_product_img_hidden_5'  />
                    </td>
                    <td><input type='text' id="recommend_product_name_5"  maxlength='255' class='layui-input' /></td>
                    <td><input type='text' id="recommend_product_price_5"  maxlength='50' class='layui-input' /></td>
                    <td><input type='text'  id="recommend_product_clickPath_5"  maxlength='500' class='layui-input'  /></td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">顶部图片预览</label>
        <div class="layui-input-block">
            <img id='top_banner_preview' src='/images/img_1200_110.png'  style="width:1200px;height:110px;"   >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">顶部图片</label>
        <div class="layui-input-block">
            <table class="layui-table">
                <colgroup>
                    <col >
                    <col >
                    <col>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>图片上传(推荐1200px*110px)</th>
                    <th>标题</th>
                    <th>点击跳转</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="topBanner">
                <tr >
                    <td>
                        <input type='file' class='topBannerImgs'   id='top_banner_img' />
                        <input type='hidden' id='top_img_hidden'  />
                    </td>
                    <td><input type='text' id="top_banner_title"  maxlength='100' class='layui-input' /></td>
                    <td><input type='text'   id="top_banner_clickPath"   maxlength='500' class='layui-input'  /></td>
                    <td> <button type='button' id='top_banner_delete_btn'  >清空</button></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">左侧轮播图</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="addLeftBanner">添加一行</button>

            <table class="layui-table">
                <colgroup>
                    <col >
                    <col >
                    <col >
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>图片预览</th>
                    <th>图片上传(推荐260px*220px)</th>
                    <th>标题</th>
                    <th>点击跳转</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="leftBanner">

                </tbody>
            </table>
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label required">右侧顶部图片</label>
        <div class="layui-input-block">

            <table class="layui-table">
                <colgroup>
                    <col >
                    <col >
                    <col >
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>图片预览</th>
                    <th>图片上传(推荐260px*220px)</th>
                    <th>标题</th>
                    <th>点击跳转</th>
                </tr>
                </thead>
                <tbody id="rightBanner">
                    <tr >
                        <td><img id='right_banner_preview' src='/images/img_260_220.png'  style="width:260px;height:220px;" ></td>
                        <td>
                            <input type='file' class='rightTopBannerImgs' id='right_banner_img' />
                            <input type='hidden' id='right_banner_img_hidden'  />
                        </td>
                        <td><input type='text' id="right_banner_title"  maxlength='100' class='layui-input' /></td>
                        <td><input type='text'  id="right_banner_clickPath"  maxlength='500' class='layui-input'  /></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label required">右侧底部图片</label>
        <div class="layui-input-block">

            <table class="layui-table">
                <colgroup>
                    <col >
                    <col >
                    <col >
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>图片预览</th>
                    <th>图片上传(推荐260px*220px)</th>
                    <th>标题</th>
                    <th>点击跳转</th>
                </tr>
                </thead>
                <tbody id="rightBottomBanner">
                <tr >
                    <td><img id='right_bottom_banner_preview' src='/images/img_260_220.png'  style="width:260px;height:220px;" ></td>
                    <td>
                        <input type='file' class='rightBottomBannerImgs'   id='right_bottom_banner_img' />
                        <input type='hidden' id='right_bottom_img_hidden'  />
                    </td>
                    <td><input type='text' id="right_bottom_banner_title"  maxlength='100' class='layui-input' /></td>
                    <td><input type='text'   id="right_bottom_banner_clickPath"   maxlength='500' class='layui-input'  /></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">底部图片预览</label>
        <div class="layui-input-block">
             <img id='bottom_banner_preview' src='/images/img_1200_110.png'  style="width:1200px;height:110px;"   >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">底部图片</label>
        <div class="layui-input-block">
            <table class="layui-table">
                <colgroup>
                    <col >
                    <col >
                    <col>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>图片上传(推荐1200px*110px)</th>
                    <th>标题</th>
                    <th>点击跳转</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="bottomBanner">
                <tr >
                    <td>
                        <input type='file' class='bottomBannerImgs'   id='bottom_banner_img' />
                        <input type='hidden' id='bottom_img_hidden'  />
                    </td>
                    <td><input type='text' id="bottom_banner_title"  maxlength='100' class='layui-input' /></td>
                    <td><input type='text'   id="bottom_banner_clickPath"   maxlength='500' class='layui-input'  /></td>
                    <td> <button type='button' id='bottom_banner_delete_btn'  >清空</button></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="showStatus" value="1" title="显示" checked="">
            <input type="radio" name="showStatus" value="0" title="隐藏">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">栏目类型</label>
        <div class="layui-input-block">
            <input type="radio" name="type" value="1" title="PC端" checked="">
            <!--<input type="radio" name="type" value="2" title="移动端">-->
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">排序</label>
        <div class="layui-input-block">
            <input type="number" name="columnSort"    placeholder="请输入排序" value="" class="layui-input" lay-verify="number">
            <tip>值越大越靠前</tip>
        </div>

    </div>


    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注信息</label>
        <div class="layui-input-block">
            <textarea name="remark" class="layui-textarea" maxlength="255" placeholder="请输入备注信息"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>


<script th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/common/common.js}" charset="utf-8"></script>
<script>
    layui.config({
        base: basePath+'/lib/layui_ext/dtree/' //配置 layui 第三方扩展组件存放的基础目录
    }).extend({
        dtree: 'dtree' //定义该组件模块名
    }).use(['form','dtree', 'table','laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;
        var dtree = layui.dtree;
        var areaTree;
        var areaTreeDataArray = new Array();
        var areaArray =  new Array();
        var loadding;

        var topLabelTable;
        var leftLabelTable;

        var topLabelData = new Array();
        var leftLabelData = new Array();

        var labelIncrement= 0;
        var leftBannerIncrement = 0;
        var laydate = layui.laydate;



        //初始化时间控件
        laydate.render({
            elem: '#startShowDate' //指定元素
            ,type: 'datetime'
        });

        //初始化时间控件
        laydate.render({
            elem: '#endShowDate' //指定元素
            ,type: 'datetime'
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {

            var bannerImgs = $(".leftBannerImgs");
            if(bannerImgs==null||bannerImgs.length<=0)
            {
                layer.msg("请上传左侧轮播图");
                return false;
            }
            for(var p=0;p<bannerImgs.length;p++)
            {
                var leftBanner = $(bannerImgs[p]);
                if(leftBanner==null||leftBanner.val()==null||leftBanner.val()=="")
                {
                    layer.msg("请上传左侧轮播图");
                    return false;
                }
            }

            bannerImgs = $(".rightTopBannerImgs");
            if(bannerImgs==null||bannerImgs.length<=0)
            {
                layer.msg("请上传右侧顶部图片");
                return false;
            }
            for(var p=0;p<bannerImgs.length;p++)
            {
                var rightTopBanner = $(bannerImgs[p]);
                if(rightTopBanner==null||rightTopBanner.val()==null||rightTopBanner.val()=="")
                {
                    layer.msg("请上传右侧顶部图片");
                    return false;
                }
            }


            bannerImgs = $(".rightBottomBannerImgs");
            if(bannerImgs==null||bannerImgs.length<=0)
            {
                layer.msg("请上传右侧底部图片");
                return false;
            }
            for(var p=0;p<bannerImgs.length;p++)
            {
                var rightBottomBanner = $(bannerImgs[p]);
                if(rightBottomBanner==null||rightBottomBanner.val()==null||rightBottomBanner.val()=="")
                {
                    layer.msg("请上传右侧底部图片");
                    return false;
                }
            }

            var areaCodeArray = new Array();
            var areaNameArray = new Array();
            for(var i=0;i<areaArray.length;i++)
            {
                areaCodeArray[i] = areaArray[i].code;
                areaNameArray[i] = areaArray[i].name;
            }
            data.field.areaCodeList=areaCodeArray;
            data.field.areaNameList=areaNameArray;

            data.field.topLabels = topLabelData;
            data.field.leftLabels = leftLabelData;

            var columnLeftBannerVOS = new Array();
            var leftBannerHiddens = $(".leftBannerHiddens");
            if(leftBannerHiddens!=null&&leftBannerHiddens.length>0)
            {
                for(var j=0;j<leftBannerHiddens.length;j++)
                {
                    var columnLeftBanner={};
                    var attrIndex = $(leftBannerHiddens).attr("attr-index");
                    columnLeftBanner.imgPath = $(leftBannerHiddens).val();
                    columnLeftBanner.title = $("#left_banner_title_"+attrIndex).val();
                    columnLeftBanner.clickPath = $("#left_banner_clickPath_"+attrIndex).val();
                    columnLeftBannerVOS.push(columnLeftBanner);
                }
            }else{
                layer.msg("请上传左侧轮播图");
                return false;
            }
            data.field.columnLeftBannerVOS = columnLeftBannerVOS;

            var columnRecommendProductVOS = new Array();
            for(var j=0;j<6;j++)
            {
                var recommendProduct={};
                var recommendProductImg = $("#recommend_product_img_hidden_"+j).val();
                if(recommendProductImg==null||recommendProductImg=="")
                {
                    layer.msg("请上传商品图片");
                    return false;
                }
                recommendProduct.imgPath = recommendProductImg;
                recommendProduct.productName=$("#recommend_product_name_"+j).val();
                if(recommendProduct.productName==null||recommendProduct.productName=="")
                {
                    layer.msg("商品名称不能为空");
                    return false;
                }
                recommendProduct.productPrice=$("#recommend_product_price_"+j).val();
                if(recommendProduct.productPrice==null||recommendProduct.productPrice=="")
                {
                    layer.msg("商品价格不能为空");
                    return false;
                }
                recommendProduct.clickPath=$("#recommend_product_clickPath_"+j).val();
                if(recommendProduct.clickPath==null||recommendProduct.clickPath=="")
                {
                    layer.msg("商品点击跳转不能为空");
                    return false;
                }
                columnRecommendProductVOS.push(recommendProduct);
            }
            if(columnRecommendProductVOS.length<6)
            {
                layer.msg("请配置商品推荐,数量至少6个");
                return false;
            }
            data.field.columnRecommendProducts = columnRecommendProductVOS;

            //右侧顶部图片
            data.field.rightTopBanner={};
            data.field.rightTopBanner.imgPath = $("#right_banner_img_hidden").val();
            data.field.rightTopBanner.title = $("#right_banner_title").val();
            data.field.rightTopBanner.clickPath = $("#right_banner_clickPath").val();


            //右侧底部图片
            data.field.rightBottomBanner={};
            data.field.rightBottomBanner.imgPath = $("#right_bottom_img_hidden").val();
            data.field.rightBottomBanner.title = $("#right_bottom_banner_title").val();
            data.field.rightBottomBanner.clickPath = $("#right_bottom_banner_clickPath").val();


            //顶部图片
            data.field.topBanner={};
            data.field.topBanner.imgPath = $("#top_img_hidden").val();
            data.field.topBanner.title = $("#top_banner_title").val();
            data.field.topBanner.clickPath = $("#top_banner_clickPath").val();

            //底部图片
            data.field.bottomBanner={};
            data.field.bottomBanner.imgPath = $("#bottom_img_hidden").val();
            data.field.bottomBanner.title = $("#bottom_banner_title").val();
            data.field.bottomBanner.clickPath = $("#bottom_banner_clickPath").val();

            loadding = layer.load();
            $.ajax({
                url:"[[@{/column/pcIndexColumn/save}]]",
                contentType: "application/json; charset=utf-8",
                type:'POST',
                data:JSON.stringify(data.field),
                success:function(data){
                    if(data.code<=0) {
                        layer.msg(data.msg);
                        return false;
                    }
                    var index = layer.alert(data.msg, {
                        title: '提示信息'
                    }, function () {
                        // 关闭弹出层
                        layer.close(index);
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.location.reload();
                        parent.layer.close(iframeIndex);

                    });
                },
                complete:function()
                {
                    layer.close(loadding);
                }
            });


            return false;
        });

        initTopLabelTable();
        function initTopLabelTable()
        {
            topLabelTable = table.render({
                elem: '#columnTopLabelTable',
                defaultToolbar:[],
                toolbar: '#columnTopLabelTableToolbar',
                cols: [
                    [
                        {field: 'id',  title: '主键', hide: true},
                        {field: 'labelName', width: 600,edit:"text", title: '标签名称'},
                        {field: 'clickPath', width: 150,edit:"text", title: '点击跳转'},
                        {title: '操作', minWidth: 300, toolbar: '#columnTopLabelTableBar', align: "center"}
                    ]
                ],
                data: topLabelData,
                skin: 'line'
            });


            /**
             * toolbar监听事件
             */
            table.on('toolbar(columnTopLabelTableFilter)', function (obj) {
                if (obj.event === 'add') {  // 监听添加操作
                    labelIncrement++;
                    topLabelData.push({id:labelIncrement,labelName:"标签名称",clickPath:"#"});
                    initTopLabelTable();
                }
            });


            table.on('tool(columnTopLabelTableFilter)', function (obj) {
                var data = obj.data;
                if (obj.event == 'delete') {
                    layer.confirm('确定删除该标签?', function (index) {
                        if(topLabelData!=null&&topLabelData.length>0)
                        {
                            for(var i=0;i<topLabelData.length;i++)
                            {
                                var row = topLabelData[i];
                                if(data.id==row.id)
                                {
                                    topLabelData.splice(i, 1);
                                    break;
                                }
                            }
                        }
                        initTopLabelTable();
                        layer.close(index);
                    });
                }
            });

        }

        initLeftLabelTable();
        function initLeftLabelTable()
        {
            leftLabelTable = table.render({
                elem: '#columnLeftLabelTable',
                defaultToolbar:[],
                toolbar: '#columnLeftLabelTableToolbar',
                cols: [
                    [
                        {field: 'id',  title: '主键', hide: true},
                        {field: 'labelName', width: 600,edit:"text", title: '标签名称'},
                        {field: 'clickPath', width: 150,edit:"text", title: '点击跳转'},
                        {title: '操作', minWidth: 300, toolbar: '#columnLeftLabelTableBar', align: "center"}
                    ]
                ],
                data: leftLabelData,
                skin: 'line'
            });




            /**
             * toolbar监听事件
             */
            table.on('toolbar(columnLeftLabelTableFilter)', function (obj) {
                if (obj.event === 'add') {  // 监听添加操作
                    labelIncrement++;

                    leftLabelData.push({id:labelIncrement,labelName:"标签名称",clickPath:"#"});

                    initLeftLabelTable();
                }
            });



            table.on('tool(columnLeftLabelTableFilter)', function (obj) {
                var data = obj.data;
                 if (obj.event == 'delete') {
                     layer.confirm('确定删除该标签?', function (index) {
                         if(leftLabelData!=null&&leftLabelData.length>0)
                         {
                             for(var i=0;i<leftLabelData.length;i++)
                             {
                                 var row = leftLabelData[i];
                                 if(data.id==row.id)
                                 {
                                     leftLabelData.splice(i, 1);
                                     break;
                                 }
                             }
                         }
                         initLeftLabelTable();
                         layer.close(index);
                     });
                }
            });

        }





        /**
         * 拿到所有选中节点的ID
         * @param data
         * @param idArray
         */
        function getCheckdNodeId(data,idArray)
        {
            for(var i=0;i<data.length;i++)
            {
                areaTreeDataArray.push(data[i]);
                if(data[i].state.checked==true)
                {
                    idArray.push(data[i].id);
                }
                if(data[i].children!=null&&data[i].children.length>0)
                {
                    getCheckdNodeId(data[i].children,idArray);
                }
            }
        }


        /**
         * 拿到指定节点对象
         */
        function getNodeObject(nodeId)
        {
            for(var i=0;i<areaTreeDataArray.length;i++)
            {
                if(areaTreeDataArray[i].id==nodeId)
                {
                    return areaTreeDataArray[i];
                }
            }
            return null;
        }


        /**
         * 拿到上级节点信息
         */
        function getParentNode(areaArray,areaNames,pid)
        {
            for(var i=0;i<areaTreeDataArray.length;i++)
            {

                if(areaTreeDataArray[i].id==pid)
                {
                    var exists=false;
                    //判断上级节点ID是否已经保存了
                    for(var j=0;j<areaArray.length;j++)
                    {
                        if(areaArray[j].id==pid) {
                            exists = true;
                        }
                    }
                    //避免上级节点ID重复保存两份
                    if(!exists)
                    {
                        areaArray.push({id:areaTreeDataArray[i].id,code:areaTreeDataArray[i].areaCode,name:areaTreeDataArray[i].text});
                        areaNames+=" "+areaTreeDataArray[i].text;
                    }
                    if(areaTreeDataArray[i].pid!=-1) {
                        //找到这个节点的上级节点
                        getParentNode(areaArray,areaNames, areaTreeDataArray[i].pid);
                    }
                }
            }
        }



        $("#selectArea").click(function(){
            loadding = layer.load();
            index = layer.open({
                title: '选择关联城市',
                type: 1,
                shade: 0.2,
                maxmin:true,
                area: ['20%', '60%'],
                btn: ['确定'],
                content: "<ul id='areaTree' class='dtree' data-id='0' ></ul>",
                success:function(layero){
                    loadding = layer.load();
                    $.ajax({
                        url:"[[@{/}]]banner/query/area/tree",
                        type:'POST',
                        data:{bannerId:null},
                        success:function(data){
                            if(data.code==1)
                            {
                                //已选择节点
                                var idArray = new Array();
                                areaTreeDataArray = new Array();
                                getCheckdNodeId(data.data,idArray);
                                areaTree = dtree.render({
                                    elem: "#areaTree",//html中的id值
                                    data:data.data,
                                    width:'100%',
                                    checkbarType: "no-all",
                                    checkbar: true,  //开启复选框
                                    checkbarData: "choose",// 记录选中（默认）， "change"：记录变更， "all"：记录全部， "halfChoose"："记录选中和半选（V2.5.0新增）"
                                    done: function (res, $ul, first) {
                                        if (first) {
                                            if(idArray!=null&&idArray.length>0) {
                                                dtree.chooseDataInit("areaTree",  idArray.join(",")); //"001001,001002"被选中的子节点id
                                                dtree.initNoAllCheck("areaTree");// 反选半选状态(原始数据中父节点的选中或半选状态并没有被带上)
                                            }
                                        }

                                    }
                                });
                            }
                        },
                        complete:function()
                        {
                            layer.close(loadding);
                        }
                    });

                },
                yes: function(index, layero){
                    var selectNodes = areaTree.getCheckbarNodesParam("areaTree");
                    if(selectNodes==null||selectNodes.length<=0)
                    {
                        layer.msg("请选择地区");
                        return false;
                    }
                    areaArray =  new Array();
                    var areaNames = "";
                    for (var i = 0; i < selectNodes.length; i++) {
                        var selectNodeObject = getNodeObject(selectNodes[i].nodeId);
                        areaArray.push({id:selectNodeObject.id,code:selectNodeObject.code,name:selectNodeObject.text});
                        areaNames+=" "+selectNodeObject.text;
                        getParentNode(areaArray,areaNames,selectNodeObject.pid);
                    }
                    $("#selectArea").val(areaNames);
                    for (var j = 0; j < areaArray.length; j++) {
                        areaArray[j]={code:areaArray[j].code,name:areaArray[j].name};
                    }
                    layer.close(index);
                }
            });
            $(window).on("resize", function () {
                layer.full(index);
            });

        });


        $("#bottom_banner_delete_btn").click(function(){
            $("#bottom_img_hidden").val("");
            $("#bottom_banner_title").val("");
            $("#bottom_banner_clickPath").val("");
            $("#bottom_banner_img").val("");
            $("#bottom_banner_preview").attr("src",basePath+"#");
        });


        $("#top_banner_delete_btn").click(function(){
            $("#top_img_hidden").val("");
            $("#top_banner_title").val("");
            $("#top_banner_clickPath").val("");
            $("#top_banner_img").val("");
            $("#top_banner_preview").attr("src",basePath+"#");
        });


        appendLeftBannner();

        /**
         * 添加一行轮播图
         **/
        function appendLeftBannner()
        {
            leftBannerIncrement++;
            $("#leftBanner").append("<tr id='banner_tr_"+leftBannerIncrement+"'>\n" +
                "        <td><img id='left_banner_preview_"+leftBannerIncrement+"' src='"+basePath+"/images/img_260_220.png'  style='width:260px;height:220px;' ></td>\n" +
                "        <td>" +
                "               <input type='file' class='leftBannerImgs'  id='left_banner_img_"+leftBannerIncrement+"' />" +
                "               <input type='hidden' attr-index='"+leftBannerIncrement+"'  class='leftBannerHiddens' id='left_banner_img_hidden_"+leftBannerIncrement+"' />" +
                "       </td>\n" +
                "        <td><input type='text' id='left_banner_title_"+leftBannerIncrement+"'  maxlength='100' class='layui-input' /></td>\n" +
                "        <td><input type='text' id='left_banner_clickPath_"+leftBannerIncrement+"'  maxlength='500' class='layui-input'  /></td>\n" +
                "        <td> <button type='button' class='leftBannerTableDelRow' id='left_banner_delete_"+leftBannerIncrement+"' attr-index='"+leftBannerIncrement+"' >删除</button></td>\n" +
                "      </tr>");


            letBannerTableUploadPreview(leftBannerIncrement);
            bindLeftBannerTableDeleteRowEvent();
        }

        $("#addLeftBanner").click(function(){
            appendLeftBannner();
        });


        function uploadImg(fileId,previewImg,imgHidden)
        {
            if($(fileId)[0].files[0]!=null) {
                loadding = layer.load();
                var formData = new FormData();
                formData.append("file", $(fileId)[0].files[0]);
                $.ajax({
                    url: '/common/img/upload',
                    type: 'post',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        $(previewImg).attr("src", res.data.httpPath);
                        $(imgHidden).val(res.data.path);
                    },
                    complete: function () {
                        layer.close(loadding);
                    }
                });
            }
        }


        /**
         * 初始化左侧轮播图列表中点击上传图片
         * @param pos
         */
        function letBannerTableUploadPreview(pos)
        {

            if($("#left_banner_img_"+pos)!=null) {
                $("#left_banner_img_" + pos).on("change", function () {
                    uploadImg("#left_banner_img_"+pos,"#left_banner_preview_"+pos,"#left_banner_img_hidden_"+pos);
                });
            }

        }

        recommendProductUploadPreview();

        /**
         * 初始化推荐商品
         */
        function recommendProductUploadPreview()
        {
            for(var pos=0;pos<6;pos++)
            {
                $("#recommend_product_img_" + pos).on("change", function () {
                    var attrIndex = $(this).attr("attr-index");
                    uploadImg("#recommend_product_img_"+attrIndex,"#recommend_product_preview_"+attrIndex,"#recommend_product_img_hidden_"+attrIndex);
                });
            }
        }

        rightTopBannerTableUploadPreview();

        /**
         * 初始化右侧顶部轮播图列表中点击上传图片
         * @param pos
         */
        function rightTopBannerTableUploadPreview()
        {

            if($("#right_banner_img")!=null) {
                $("#right_banner_img" ).on("change", function () {
                    uploadImg("#right_banner_img","#right_banner_preview","#right_banner_img_hidden");
                });
            }

        }


        rightBottomBannerTableUploadPreview();


        /**
         * 初始化右侧底部轮播图列表中点击上传图片
         */
        function rightBottomBannerTableUploadPreview()
        {

            if($("#right_bottom_banner_img")!=null) {
                $("#right_bottom_banner_img" ).on("change", function () {

                    uploadImg("#right_bottom_banner_img","#right_bottom_banner_preview","#right_bottom_img_hidden");

                });
            }

        }


        topBannerTableUploadPreview();

        /**
         * 初始化顶部轮播图列表中点击上传图片
         */
        function topBannerTableUploadPreview()
        {

            if($("#top_banner_img")!=null) {
                $("#top_banner_img" ).on("change", function () {

                    uploadImg("#top_banner_img","#top_banner_preview","#top_img_hidden");

                });
            }

        }

        bottomBannerTableUploadPreview();

        /**
         * 初始化底部轮播图列表中点击上传图片
         */
        function bottomBannerTableUploadPreview()
        {

            if($("#bottom_banner_img")!=null) {
                $("#bottom_banner_img" ).on("change", function () {

                    uploadImg("#bottom_banner_img","#bottom_banner_preview","#bottom_img_hidden");

                });
            }

        }

        /**
         * 初始化删除事件
         */
        function bindLeftBannerTableDeleteRowEvent()
        {
            $(".leftBannerTableDelRow").unbind("click");
            //SKU信息
            $(".leftBannerTableDelRow").bind("click", function () {
                var attrIndex = $(this).attr("attr-index");
                layer.confirm('确定删除?', {
                    btn: ['确定','关闭'], //按钮
                    title:'提示信息'
                }, function(index) {
                    $("#banner_tr_" +attrIndex ).remove();
                    layer.close(index);
                });
            });
        }


    });
</script>
</body>
</html>